// _public/cpt/button/index.js
const { c0, $config } = getApp()
const { button } = $config
Component({
    behaviors: ['wx://form-field-button'],
    options:{
        virtualHost: true
    },
    properties: {
        formType: String,
        openType: String,
        loading: Boolean,
        plain: Boolean,
        disabled: Boolean,
        confirmType: String,
        // 自定义
        size:{ type:String, value: 'default' },
        gray: Boolean,
        param: Object,
        style: String,
        className:String,
        width: null,
        height: Number,
        fontSize: Number,
        color: String,
        bgcolor: String,
        padding: Number,
        round: { type: null, value:10 },
    },
    data: { 
        hoverClass: 'hover-o'
     },
    lifetimes: {
        attached(){
            this.listener()
        }
    },
    observers: {
        'disabled'(e){
            this.listener()
        }
    },
    methods: {
        listener(){
            const { data } = this
            let { width, color, bgcolor=$config.c0, round, plain, disabled, gray, size, hoverClass } = data
            let { fontSize, height, padding } = $config.button[size]

            height = data.height || height
            padding = data.padding || padding || 20

            let widthStr = `width:${width || '100%'}`
            let boldStr = ''
            if(size === 'small' || size ==='mini'){
                widthStr='width:auto'
                boldStr = 'font-weight:normal;'
            }
            if(typeof width === 'number'){
                widthStr = `min-width: ${ width }rpx`
            }
            let borderStr=''

            if(gray && !plain){
                color = '#666'
                bgcolor = '#eee'
            }else if(gray && plain){
                color = '#666'
                bgcolor = '#fff'
                borderStr = 'border:1rpx solid #666'
            }else if(plain){
                color =  color || c0;
                bgcolor = bgcolor || '#fff'
                borderStr = `border:1rpx solid ${color}`
            }else{
                color = color || '#fff'
            }
            if(disabled){
                color = 'rgba(0, 0, 0, 0.3)'
                bgcolor = plain ? '#fff' : '#F7F7F7'
                borderStr = `border:1rpx solid #f7f7f7`
            }
            if(bgcolor === 'none') {
                bgcolor = 'transparent'
                hoverClass = 'none-hover'
            }
            if(plain && (bgcolor==='#fff' || bgcolor==='white')){
                hoverClass = 'white-hover'
            }
            this.setData({
                hoverClass,
                buttonStyle: `
                    ${ widthStr };
                    font-size:${ data.fontSize ? data.fontSize : fontSize }rpx;
                    height: ${ height }rpx;
                    line-height:${ height }rpx;
                    color: ${ color };
                    background:${ bgcolor || c0 };
                    padding: 0 ${ padding }rpx;
                    border-radius: ${typeof round === 'boolean' ? height : round}rpx;
                    ${borderStr}
                    ${boldStr}
                `
            })
        }
    }
})
